import React from 'react';
import {
  View,
  StyleSheet,
  Text
} from 'react-native';
import {
  screenWidth,
  mainBgColorWhite,
  px2dp,
  fontColorBlack,
  fontColorSecDeepGray,
} from '@/styles';
import CameraCard from './camera-card';

/**
 * @author kanglang
 * @description 挂车运输证件
 * @createDate 2020/8/27
 *
 */
export default class GuaTransportLicense extends React.Component {
  onCatchImage = type => {
    this.props.onImageData && this.props.onImageData(type);
  }

  render() {
    const { image5, image6, image7, image8 } = this.props;
    return (
      <View style={styles.driverLicenseFloor}>
        <Text style={styles.title}>
          挂车道路运输证
          <Text style={{ color: fontColorSecDeepGray, fontSize: px2dp(28) }}>
            (必填)
          </Text>
        </Text>
        <View style={styles.list}>
          <CameraCard
            title='上传道路运输证正面'
            type='guaTransportionPhotoFrontId'
            icon={image5}
            onCatchImage={(type) => this.onCatchImage(type)}
            exempleImg='https://xmgj2020-prod.oss-cn-chengdu.aliyuncs.com/carSketchMap/fa8e6e4704b0e787f51f5eee7a77af646f0a8ab16.jpg'
          />
          <CameraCard
            title='上传道路运输证背面'
            type='guaTransportionPhotoBackId'
            icon={image6}
            onCatchImage={(type) => this.onCatchImage(type)}
            exempleImg='https://xmgj2020-prod.oss-cn-chengdu.aliyuncs.com/carSketchMap/fa8e6e4704b0e787f51f5eee7a77af646f0a8ab15.jpg'
          />
          <CameraCard
            title='上传代理证正面'
            type='guaAgentFrontPhotoId'
            icon={image7}
            onCatchImage={(type) => this.onCatchImage(type)}
            exempleImg='https://xmgj2020-prod.oss-cn-chengdu.aliyuncs.com/carSketchMap/fa8e6e4704b0e787f51f5eee7a77af646f0a8ab13.jpg'
          />
          <CameraCard
            title='上传代理证背面'
            type='guaAgentBackPhotoId'
            icon={image8}
            s
            onCatchImage={(type) => this.onCatchImage(type)}
            exempleImg='https://xmgj2020-prod.oss-cn-chengdu.aliyuncs.com/carSketchMap/fa8e6e4704b0e787f51f5eee7a77af646f0a8ab14.jpg'
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  driverLicenseFloor: {
    width: screenWidth,
    backgroundColor: mainBgColorWhite,
    marginTop: px2dp(24),
    padding: px2dp(32),
    alignItems: 'center'
  },
  title: {
    fontSize: px2dp(32),
    color: fontColorBlack,
    fontWeight: 'bold',
    textAlign: 'left',
    width: '100%'
  },
  desc: {
    fontSize: px2dp(28),
    color: fontColorSecDeepGray,
    textAlign: 'center',
  },
  bgStyle: {
    width: px2dp(540),
    height: px2dp(320),
    marginVertical: px2dp(32),
    justifyContent: 'center',
    alignItems: 'center'
  },
  cameraImg: {
    width: px2dp(144),
    height: px2dp(144),
  },
  list: {
    width: '100%',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between'
  }
});
